<template>
  <el-container>
    <el-header>
      <!-- TODO: 样式需要修改 -->
      <el-page-header @back="back" content="章节详情"></el-page-header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 可能会加一个图片栏 -->
        <div class="img_warp">
          <img :src="cover" />
          <el-tooltip content="课程教材评分" placement="bottom">
            <div class="course-rate">
              <el-rate disabled v-model="courseRate"> </el-rate>
            </div>
          </el-tooltip>
        </div>
        <el-divider></el-divider>
        <!-- 这里自己重新写，不用那个 -->
        <!-- <common-aside :menus="menus"></common-aside> -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          router
          background-color="#fff"
          text-color="#000"
          active-text-color="#209dfc"
        >
          <el-menu-item
            v-for="item in menus"
            :key="item.path"
            :index="item.path"
          >
            <i :class="`el-icon-${item.icon}`"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card style="box-sizing: border-box" shadow="never">
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonAside from "@/components/CommonAside.vue";
import CommonHeader from "@/components/CommonHeader.vue";

export default {
  name: "CourseDetail",
  components: { CommonAside, CommonHeader },
  data() {
    return {
      cover: "",
      courseRate: 3.2,
      iconClasses: ["icon-rate-face-1", "icon-rate-face-2", "icon-rate-face-3"],
      activeIndex: "",
      tmpMenus: {
        student: [
          {
            name: "章节",
            path: "/detail/stu-chapter",
            icon: "document",
          },
          // {
          //   name: "考试",
          //   path: "/detail/exam",
          //   icon: "medal-1",
          // },
        ],
        teacher: [
          {
            name: "章节",
            path: "/detail/teacher-chapter",
            icon: "document",
          },
        ],
      },
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
  },
  computed: {
    menus() {
      const { role } = JSON.parse(localStorage.getItem("userInfo"));
      return this.tmpMenus[role];
    },
  },
  mounted() {
    //   // 这样也不行，只能存起来把那两个，而且存不存要看那两个是不是空，逻辑有问题，逻辑还是有问题，当一个新的进来的时候，看到不为空就没更新
    //   // 1. 当刚进来的时候，确实应该拿到那两个，然后去存起来，
    //   const course_id_local = localStorage.getItem("course_id");
    //   const cover_local = localStorage.getItem("cover");
    //   const { course_id, cover } = this.$route.query;

    //   if (
    //     course_id_local == null ||
    //     cover_local == null ||
    //     (course_id != undefined && course_id_local !== course_id) ||
    //     (cover != undefined && cover_local !== cover)
    //   ) {
    //     // 说明是第一次进来
    //     // const { course_id, cover } = this.$route.query;
    //     // this.cover = cover;
    //     localStorage.setItem("course_id", course_id);
    //     this.$store.commit("studyAbout/SET_COURSE", course_id);
    //     localStorage.setItem("cover", cover);
    //   }
    //   // 2. 当不是刚进来的时候，就不应该去拿再存，不是第一次进来的逻辑
    // 设置封面
    // this.cover = cover || cover_local;
    this.cover = this.$store.state.studyAbout.course.cover;
    // 设置菜单数据

    // 跳转到应该的菜单
    let { path } = this.$route;
    if (path == "/detail") {
      path = this.menus[0].path;
    }
    this.activeIndex = path;
    this.$router.replace(path).catch((err) => err);
  },
};
</script> 

<style lang='less' scoped>
.el-container {
  height: 100%;
  .el-header {
    padding: 0;
    background-color: #b3c0d1;
    z-index: 1000;
  }

  .el-container {
    height: 100%;
    .el-aside {
      .img_warp {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        cursor: pointer;
        position: relative;
        .course-rate {
          position: absolute;
          bottom: 10px;
          left: 32px;
        }
        img {
          width: 80%;
          object-fit: cover;
          border-radius: 10px;
          transition: all 0.3s ease-in-out;
        }
        &:hover img {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
        }
      }
      .el-divider {
        width: 80%;
        margin: 10px auto;
      }
    }
    .el-main {
      padding: 20px;
      background-color: #f5f5f5;
      overflow: auto;
      .el-card {
        width: 100%;
        height: 100%;
        :deep(.el-card__body) {
          height: 100%;
          box-sizing: border-box;
        }
      }
    }
  }
}
</style>